<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {getUnfinishedCase, getUnfinishedCaseDetail} from "@/axios/case/caseReq";
import useRespondentStore from "@/stores/respondent.js";
import DetailedCase from "@/compontent/detailedCase.vue";
import { Case } from "@/types/response/case";

const respondentStore = useRespondentStore()
//表格数据
const tableData = ref([])
onMounted(()=> {
	getUnfinishedCase(respondentStore.id).then(res => {
		res.forEach(item => {
				tableData.value.push(item)
		})
	})
})
// 控制详细案件弹窗
let detailedDialog = reactive({
  visible: false,
  case: new Case(),
  look(c: Case) {
    detailedDialog.case = c;
    detailedDialog.visible = true;
  },
  close() {
    detailedDialog.visible = false;
  }
})


</script>

<template>
	<el-scrollbar height="500px">
	<el-table :data="tableData" stripe style="width: 80%">
		<el-table-column prop="caseId" label="案件号" width="100"/>
		<el-table-column prop="applicantName" label="申请人" width="100"/>
		<el-table-column prop="caseState" label="案件状态" width="200px">
			<template #default="scope">
				<el-tag type="success" size="small">{{scope.row.caseState==8? '已接受还款方案,等待调解员同意' : '已拒绝所有还款方案,等待线下调解'}}</el-tag>
			</template>
		</el-table-column>
		<el-table-column label="操作" width="180">
			<template #default="scope">
				<el-button type="success" size="small" @click="detailedDialog.look(scope.row)">查看详情</el-button>
			</template>
		</el-table-column>
	</el-table>
	</el-scrollbar>

	<DetailedCase :case-id="detailedDialog.case.caseId" v-model="detailedDialog.visible"></DetailedCase>
</template>

<style scoped lang="css">

</style>